import React from 'react';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Select, DatePicker, Cascader, InputNumber, Switch } from 'antd';
import UploadImg from '../components/ComForm/UpLoadImg';
import SingleSelect from '../components/ComForm/SingleSelect';
import MoreSelect from '../components/ComForm/MoreSelect';
import TreeChoose from '../components/ComForm/TreeChoose';
import Ueditor from '../components/ComForm/Ueditor';

const FormItem = Form.Item;

class CommonForm extends React.Component {
	render() {
		let options = [{
			value: 'zhejiang',
			label: '浙江',
			children: [{
				value: 'hangzhou',
				label: '杭州',
				children: [{
					value: 'yuhang',
					label: '余杭',
				}],
			}]
		}]
		return(
			<Form horizontal>
    		<FormItem label="下拉框" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
          		<Select defaultValue="D">
			      <Option value="A">A</Option>
			      <Option value="B">B</Option>
			      <Option value="C" disabled>C</Option>
			      <Option value="D">D</Option>
			    </Select>
        	</FormItem>
    		<FormItem label="输入框：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
	          <Input type="text"  placeholder="输入框" />
	        </FormItem>
    		<FormItem label="选择树：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
    			<TreeChoose />
        	</FormItem>
    		<FormItem label="数字框：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
         		<InputNumber min={1} max={10} defaultValue={3}  />
       	 	</FormItem>
    		<FormItem label="上传图片：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
					<UploadImg />
        	</FormItem>
    		<FormItem label="单选：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
					<SingleSelect />
        	</FormItem>
    		<FormItem label="多选：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
					<MoreSelect />
        	</FormItem>
    		<FormItem label="时间框：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
    			<DatePicker />
        	</FormItem>
    		<FormItem label="开关：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
    			<Switch checkedChildren={'开'} unCheckedChildren={'关'} />
        	</FormItem>
    		<FormItem label="联动选择：" labelCol={{ span: 5 }} wrapperCol={{ span: 6 }}>
    			 <Cascader options={options} placeholder="地区联动选择" />
        	</FormItem>
    		<FormItem label="文本框：" labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
          		<Input type="textarea" rows={4}  placeholder="文本框" />
        	</FormItem>
    		<FormItem label="富文本编辑器：" labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
          		<Ueditor id="atUeditor" height="200"/>
        	</FormItem>
    		<FormItem wrapperCol={{offset: 5}}>
	          <Button type="default" htmlType="submit" size="large">提交</Button>
	          <Button type="default" htmlType="reset" size="large" style={{ marginLeft: 8 }}>重置</Button>
	        </FormItem>
    	</Form>
		)
	}
	componentDidMount() {
		const breadcrumbData = {
			breadcrumb: [{
					name: '首页',
					path: '/'
				},
				{
					name: '通用表单'
				}
			]
		};
		this.props.dispatch({
			type: 'common/changeBreadcrumb',
			payload: breadcrumbData
		})
	}
}

const CommonFormForm = Form.create()(CommonForm);

function mapStateToProps({
	common
}) {
	return {
		common
	};
}
export default connect(mapStateToProps)(CommonForm);